import React, { Component } from 'react'
import './index.css'
import  auther from '../../assets/images/auther.png'
import { withRouter } from 'react-router-dom';
 class Dujia extends Component {
    godetail(Id) {
        this.props.history.push({
          pathname: '/detail/' + Id,
          state: {
            Id
          }
        })
      }
    render() {
        
        return (
            <div className="recommend-container">
                <div className="title-box">
                    <div className="title-left">
                        <i></i>
                    </div>
                    <div className="title-center">主编力荐</div>
                </div>

                {
                    this.props.data &&  this.props.data.slice(0,1).map((item,index) =>{
                        return (
                            <div className="sketch" key={index} onClick={() => this.godetail(item.book_id)}>
                                <div className="sketch-img">
                                    <img src={item.cover_url} alt="" />
                                </div>
                                <div className="sketch-context" key={index}>
                                    <div className="context-title">{item.book_name}</div>
                                    <div className="context-txt">{item.description}</div>
                                    <div className="context-bottom">
                                        <p className="auther-left">
                                            <img src={auther} alt="" />
                                                <span>{item.author_name}</span>        
                                        </p>
                                        <p className="auther-right">
                                            <span>{item.all_click}</span>
                                                万人已阅读
                                        </p>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
                <ul className="ivu-row">
                   {
                       this.props.data &&  this.props.data.slice(1,5).map((item,index)=>{
                            return (
                                <li key={index} onClick={() => this.godetail(item.book_id)}>
                                    <div><img src={item.cover_url} alt="" /></div>
                                    <p>{item.book_name}</p>
                                </li>
                            )
                        })
                   }
                </ul>
            </div>
        )
    }

}
export default withRouter(Dujia)
